<template>
<!-- 晨会看板、夕会看板 标题 -->
  <div class="board-level-head" :class="bgclass">
    <div>
      <slot name="flagImg" />
      <span class="title">{{ title }}</span>
    </div>
    <slot name="other-time"></slot>
  </div>
</template>

<script>

export default {
  props: {
    title: {
      type: String
    },
    bgclass: {
      type: String
    }
  }
}
</script>
<style lang="less" scoped>
.board-level-head {
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // 发展
  &.bg-fz {
    background-image: linear-gradient(180deg, rgba(194,220,255,0.18) 0%, #FFFFFF 100%);
  }
  // 维系
  &.bg-wx {
    background-image: linear-gradient(180deg, rgba(208,245,238,0.18) 0%, #FFFFFF 100%);
  }
  // 智家
  &.bg-zj {
    background-image: linear-gradient(180deg, rgba(253,218,213,0.22) 1%, #FFFFFF 100%);
  }
  // 交付
  &.bg-jf {
    background-image: linear-gradient(180deg, rgba(255,221,184,0.18) 1%, #FFFFFF 100%);
  }
  // 收入
  &.bg-sr {
    background-image: linear-gradient(180deg, rgba(203,194,255,0.18) 1%, #FFFFFF 100%);
  }
  // 欠费
  &.bg-qf {
    background-image: linear-gradient(180deg, rgba(190,197,250,0.18) 1%, #FFFFFF 100%);
  }
  .flag-img {
    width: 32px;
    vertical-align: middle;
    padding-left: 10px;
  }
  .title {
    font-size: 18px;
  }
  .flag-time {
    color: #999;
    padding-right: 16px;
  }
}
</style>